<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
  <button @click="fn">{{num}}</button>
  <p>{{str}}</p>
</div>
</body>
<script>
  new Vue({
    el : '#root',
    data:{
      num:1,
      str:'今天是十一月五日'
    },
    methods:{
      fn(){
        this.num++;
        this.str+='!!!';
        //数据修改中 , 视图没更新完成
        console.log('----',document.querySelector('p').innerText,'>>>>',document.querySelector('button').innerText)
        this.$nextTick( ()=>{
          //视图更新完成
          console.log(document.querySelector('p').innerText,'>>>>',document.querySelector('button').innerText)
        } )
      }
    }
  })
</script>
</html>